<template>
	<view class="forgotPasswordBox">
		<my-top :isback="true" :isline="true"></my-top>
		<view v-if="classShow == 1" class="">
			<view class="mine-header">
				<i @click="back" class="iconfont todayfanhui"></i>
				<text>
				</text>
			</view>
			<my-mine-title title="忘记密码" style="margin-top: 40rpx;"></my-mine-title>
			<view class="inputBox">
				<view class="accountdBox">
					<input maxlength="11" v-model="form.phone" class="ipt ipt1" type="text" placeholder="请输入您的手机号码" />
					<view class="registered">
						<image  style="width: 32rpx;height: 32rpx;" src="../../../static/img/delPhone.png" mode=""></image>
					</view>
				</view>
				<view class="pasdwordBox">
					<input v-model="form.code" style="outline: none;" class="ipt ipt2" placeholder="输入验证码"></input>
					<view v-if="!countFlag" @click="getCode" class="seepassword">
						<text>获取验证码</text>
					</view>
					<text class="againGetCode" v-else>
						<text style="color: #04A1FB;">{{countNum}}</text>秒后重新获取验证码
					</text>
				</view>
				<button @click="login" type="default" class="loginButton">登录</button>
			</view>
		</view>
		<view class="" v-if="classShow == 2">
			<view class="mine-header">
				<i @click="back" class="iconfont todayfanhui"></i>
				<text>
				</text>
			</view>
			<my-mine-title title="设置密码" style="margin-top: 40rpx;"></my-mine-title>
			<view class="inputBox">
				<view class="pasdwordBox">
					<input style="outline: none;" v-model="password" class="ipt ipt2" :type="pasdShow" placeholder="输入6-16位密码"></input>
					<view @click="seePasd" class="seepasswords">
						<!-- <image v-if="pasdShow == 'text'" src="../../../static/img/seepasd.png" style="height: 100%;" mode=""></image>
						<image v-else src="../../../static/img/seepsd.png" style="height: 100%;" mode=""></image> -->
						<text v-if="pasdShow == 'text'" class="iconfont todayzhengyan fongSize"></text>
						<text v-else  class="iconfont todaybiyan fongSize"></text>
					</view>
				</view>
				<button @click="setPasd" type="default" class="loginButton">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		signCode,
		SmsCodeLogin,
		checkUserAlready,
		setPassword
	} from "@/api/api.js"
	export default {
		data() {
			return {
				pasdShow: "password",
				classShow: 1,
				password: null,
				form: {
					phone: null,
					code: null
				},
				iscode: null,
				countFlag: false,
				countNum: 60,
				// 用于倒计时标记，true-正在倒计时
				countFlag: false,
				// 定时器
				intervalBtn: {},
			}
		},
		methods: {
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			setPasd() {
				if (!this.password) {
					return uni.showToast({
						title: "请输入密码",
						icon: "none"
					})
				}
				if (this.password.length < 6 || this.password.length > 16) {
					return uni.showToast({
						title: "密码6-16位",
						icon: "none"
					})
				}
				let obj = this.form;
				obj.password = this.password;
				setPassword(obj).then(res => {
					if (res.statusCode == 200 && res.data.code == 0 && res.data.data == 1) {
						uni.showToast({
							title: "修改成功 1s后跳转到登陆",
							icon:"none"
						})
						setTimeout(()=>{
							uni.navigateTo({
								url: "login"
							})
						},1000)
						
					}
				})
			},
			// 查看输入密码
			seePasd() {
				if (this.pasdShow == "password") {
					this.pasdShow = "text"
				} else {
					this.pasdShow = "password"
				}
			},
			login() {
				if (!this.form.phone) {
					return uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
				}
				if (!this.form.code) {
					return uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
				}
				try {
					SmsCodeLogin(this.form).then(res => {
						console.log(res)
						if (res.statusCode == 200 && res.data.code == 0) {
							this.classShow = 2;
						} else {
							uni.showToast({
								title: "登录失败",
								icon: "none"
							})
						}
					})
				} catch (e) {
					uni.showToast({
						title: "请重试",

					})
				}
			},
			async isRegistered() {
				let result = await checkUserAlready({
					phone: this.form.phone
				}).then(res => {
					if (res.statusCode == 200 && res.data.code == 0) {
						return res.data.data
					} else {
						uni.showToast({
							title: "失败 请重试",
							icon: "none"
						})
					}
				})
				return result
			},
			timer() {
				this.countFlag = !this.countFlag;
				this.intervalBtn = setInterval(() => {
					if (this.countNum <= 0) {
						clearInterval(this.intervalBtn)
						this.countFlag = !this.countFlag;
						this.countNum = 60;
					} else {
						this.countNum--;
					}
				}, 1000);
			},
			reg(val) {
				return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val)
			},
			// 获取验证码
			async getCode() {
				if (!this.form.phone) {
					return uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
				}
				let reg = this.reg(this.form.phone);
				if (!reg) {
				return	uni.showToast({
						title: "手机号码格式不正确！",
						icon: "none"
					})
				} 
				let result = await this.isRegistered();
				if (result == 0) {
					return uni.showModal({
						title: '提示',
						content: '该账号还未注册 是否前往注册',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: "registered"
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "还未注册 请前往注册",
									icon: "none"
								})
							}
						}
					});
				}
				if (!this.countFlag) {

					try {
						signCode({
							phone: this.form.phone
						}).then(res => {
							console.log(res);
							if (res.statusCode == 200 && res.data.data.code != 'error') {
								this.iscode = res.data.data.code;
								this.timer()
							} else {
								uni.showToast({
									title: "获取验证码失败",
									icon: "none"
								})
							}
						})
					} catch (e) {
						uni.showToast({
							title: "请重试",
							icon: "none"
						})
					}
				}

			},
		},
	}
</script>

<style scoped lang="scss">
	
	.fongSize{
		font-size: 32rpx;
		color:$today-calender-color;
	}
	.forgotPasswordBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: $today-bg-color;
	}
	.inputBox {
		width: 100%;
		padding: 0 48rpx;
		margin-top: 100rpx;
		height: 622rpx;
	}

	.button-hover {
		background: rgba(4, 161, 251, .8) !important;
	}

	.loginButton {
		margin-top: 24rpx;
		color: #FFFFFF;
		font-size: 44rpx;
		border-radius: 20rpx;
		background-color: #4A83F1;
		letter-spacing: 20rpx;
	}

	.againGetCode {
		width: 55%;
		font-size: 24rpx;
	}

	.seepassword {
		width: 25%;
		color: #04A1FB;
		font-size: 24rpx;
		height: 32rpx;
	}

	.seepasswords {
		width: 6%;
		color: #04A1FB;
		font-size: 24rpx;
		height: 32rpx;
	}

	.accountdBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}

	.pasdwordBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}

	.ipt {
		color: #333333;
		height: 61rpx;
		font-size: 32rpx;
		border: none;
		background:none;
		color: $today-calender-color;
	}

	.ipt2 {
		width: 90%;
	}

	.inputBox {
		width: 100%;
		padding: 0 48rpx;
		margin-top: 100rpx;
	}

	.mine-header {
		width: 100%;
		padding: 0 48rpx;
		display: flex;
		justify-content: space-between;
		height: 88rpx;
		align-items: center;
		font-size: 40rpx;
		color: #999999;
	}
</style>
